document.addEventListener('DOMContentLoaded', () => {
  const treeInput = document.getElementById('tree-input');
  const generateBtn = document.getElementById('generate-btn');
  const checkAVLBtn = document.getElementById('check-avl-btn');
  const operationButtons = document.getElementById('operation-buttons');
  const canvas = document.getElementById('tree-canvas');
  
  let avlTree = new AVLTree();
  let bsTree = new BSTree();

  // Initialize TreeVisualizer
  TreeVisualizer.initialize(canvas);
  canvas.width = canvas.offsetWidth;
  canvas.height = canvas.offsetHeight;

  // 生成二叉搜索树
  generateBtn.addEventListener('click', () => {
    const values = treeInput.value.split(',').map(Number).filter(n => !isNaN(n));
    bsTree.root = null;
    values.forEach(val => bsTree.insert(val));
    TreeVisualizer.drawTree(bsTree);
    operationButtons.classList.add('disabled');
  });

  // 判断是否为AVL树
  checkAVLBtn.addEventListener('click', () => {
    const isAVL = bsTree.isAVL();
    alert(isAVL ? '这是一个AVL树' : '这不是一个AVL树');
    if (isAVL) {
      operationButtons.classList.remove('disabled');
      avlTree = bsTree.toAVLTree();
      TreeVisualizer.drawTree(avlTree);
    }
  });

  // 搜索按钮
  document.getElementById('search-btn').addEventListener('click', () => {
    const value = prompt('请输入要搜索的值：');
    if (value) {
      const result = avlTree.search(Number(value));
      if (result) {
        alert(`找到值 ${value}, 索引为：${result.index}`);
        
      } else {
        alert(`未找到值 ${value}`);
        TreeVisualizer.drawTree(avlTree);
      }
    }
  });

  // 插入按钮
  document.getElementById('insert-btn').addEventListener('click', () => {
    const value = prompt('请输入要插入的值：');
    if (value) {
      const numValue = Number(value);
      if (isNaN(numValue)) {
        alert('请输入有效的数字');
        return;
      }
      
      console.log('插入前树结构：', avlTree.ascend());
      avlTree.insert(numValue);
      console.log('插入后树结构：', avlTree.ascend());
      TreeVisualizer.drawTree(avlTree);
    }
  });

  // 删除按钮
  document.getElementById('delete-btn').addEventListener('click', () => {
    const value = prompt('请输入要删除的值：');
    if (value) {
      console.log('删除前树结构：', avlTree.ascend());
      avlTree.delete(Number(value));
      console.log('删除后树结构：', avlTree.ascend());
      TreeVisualizer.drawTree(avlTree);
    }
  });

  // Ascend按钮
  document.getElementById('ascend-btn').addEventListener('click', () => {
    const sortedValues = avlTree.ascend();
    alert('中序遍历结果：\n' + sortedValues.join(', '));
  });

  // 按索引搜索按钮
  document.getElementById('index-search-btn').addEventListener('click', () => {
    const index = prompt('请输入要搜索的索引：');
    if (index) {
      console.log('当前树结构：');
      console.log(avlTree.ascend().map((v, i) => `索引 ${i}: ${v}`).join('\n'));
      
      const node = avlTree.indexSearch(Number(index));
      if (node) {
        alert(`索引 ${index} 对应的值为：${node.value}`);
      } else {
        alert('无效的索引');
      }
    }
  });

  // 按索引删除按钮
  document.getElementById('index-delete-btn').addEventListener('click', () => {
    const index = prompt('请输入要删除的索引：');
    if (index) {
      console.log('删除前树结构：', avlTree.ascend());
      avlTree.indexDelete(Number(index));
      console.log('删除后树结构：', avlTree.ascend());
      setTimeout(() => {
        TreeVisualizer.drawTree(avlTree);
      }, 0);
    }
  });

  // 自动调整canvas大小
  window.addEventListener('resize', () => {
    canvas.width = canvas.offsetWidth;
    canvas.height = canvas.offsetHeight;
    TreeVisualizer.drawTree(avlTree);
  });
});
